<template>
  <div class="course-detail">
    <div class="course-header card">
      <el-row :gutter="20">
        <el-col :span="16">
          <h1>{{ courseInfo.title }}</h1>
          <div class="course-meta">
            <span class="teacher">
              <el-icon><User /></el-icon>
              {{ courseInfo.teacher }}
            </span>
            <span class="students">
              <el-icon><UserFilled /></el-icon>
              {{ courseInfo.students }}人学习
            </span>
            <span class="rating">
              <el-icon><Star /></el-icon>
              {{ courseInfo.rating }}
            </span>
          </div>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" class="enroll-btn" size="large">立即报名</el-button>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20" class="course-content">
      <el-col :span="16">
        <div class="course-main card">
          <div class="course-cover">
            <img :src="courseInfo.img" :alt="courseInfo.title">
          </div>
          <div class="course-description">
            <h2>课程介绍</h2>
            <p>{{ courseInfo.content }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="course-sidebar">
          <div class="teacher-info card">
            <h3>讲师介绍</h3>
            <div class="teacher-profile">
              <el-avatar :size="64" :src="teacherAvatar" />
              <div class="teacher-detail">
                <h4>{{ courseInfo.teacher }}</h4>
                <p>{{ teacherTitle }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { User, UserFilled, Star } from '@element-plus/icons-vue'

const route = useRoute()
const courseInfo = ref({
  title: '',
  content: '',
  teacher: '',
  img: '',
  students: 0,
  rating: 0
})

const teacherAvatar = ref('https://picsum.photos/200/200?random=1')
const teacherTitle = ref('资深讲师')

onMounted(() => {
  // 从路由参数中获取课程信息
  const { title, content, teacher, img, students, rating } = route.query
  courseInfo.value = {
    title,
    content,
    teacher,
    img,
    students: Number(students),
    rating: Number(rating)
  }
})
</script>

<style scoped>
.course-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.course-header {
  margin-bottom: 20px;
  padding: 24px;
}

.course-header h1 {
  margin: 0 0 16px;
  font-size: 24px;
  color: var(--text-primary);
}

.course-meta {
  display: flex;
  gap: 20px;
  color: var(--text-secondary);
}

.course-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.enroll-btn {
  width: 100%;
  height: 40px;
}

.course-content {
  margin-top: 20px;
}

.course-main {
  padding: 24px;
}

.course-cover {
  margin-bottom: 24px;
}

.course-cover img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
}

.course-description h2 {
  margin: 0 0 16px;
  font-size: 20px;
  color: var(--text-primary);
}

.course-description p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.teacher-info {
  padding: 20px;
}

.teacher-info h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--text-primary);
}

.teacher-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.teacher-detail h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text-primary);
}

.teacher-detail p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}
</style> 